drow2DAxes(context);
var x1 = document.getElementById('x1');
var y1 = document.getElementById('y1');
var x2 = document.getElementById('x2');
var y2 = document.getElementById('y2');
var x3 = document.getElementById('x3');
var y3 = document.getElementById('y3');

x1.onmouseover = hint;
y1.onmouseover = hint;
x2.onmouseover = hint;
y2.onmouseover = hint;
x3.onmouseover = hint;
y3.onmouseover = hint;

var show = document.getElementById('show');
var refurbish = document.getElementById('refurbish');
refurbish.onclick = function () {
    location.reload();
}

/*
 *定义演示按钮单击触发事件
 */
async function buOnclick() {
    if (x1.value == '' || x2.value == '' || y1.value == '' || y2.value == '') {
        alert('请先输入！');
        return;
    }
    let x11 = 0;
    let y11 = 0;
    let x22 = 0;
    let y22 = 0;
    let x33 = 0;
    let y33 = 0;

    try{
        x11 = eval(x1.value);
        y11 = eval(y1.value);
        x22 = eval(x2.value);
        y22 = eval(y2.value);
    }catch(error){
        alert("输入格式不正确，请重新输入！");
		return;
    }

    var dashC = '#9900FF'; //虚线（辅助线）颜色
    x33 = x11 + x22;
    y33 = y11 + y22;
    context.save();
    var bb = Math.max(Math.abs(x11), Math.abs(x22), Math.abs(x33),
        Math.abs(y11), Math.abs(y22), Math.abs(y33));
    checkAxes(mycanvas, context, bb, bb, 2);

    context.lineWidth = 3;
    context.fillStyle = "black";
    context.font = "bold italic 20pt Times new roman";
    await drowVector3(context, x11, y11);
    context.fillText('a', x11 * c1, -y11* c1);
    await drowVector3(context, x22, y22);
    context.fillText('b', x22 * c1, -y22 * c1);
    await drowDashedLine2(context, x11, y11, x33, y33, dashC);
    await drowDashedLine2(context, x22, y22, x33, y33, dashC);
    await drowVector3(context, x33, y33);
    context.fillText('c', x33 * c1, -y33 * c1);
    context.restore();
    x3.value = x33;
    y3.value = y33;
}

show.addEventListener('click', buOnclick);